<template>
  <div class="container-box" v-for="(item,index) in list" :key="index">
    <div class="left">
      <div>
        <label for="">* 任务标题:</label><span>{{item.taskTitle}}</span>
      </div>
      <div>
        <label for="">* 任务类型:</label><span>{{item.taskType}}</span>
      </div>
      <div>
        <label for="">任务对象：</label><ul style="margin-left: 70px;">
            <li>姓名{{item.name}}</li>
            <li>性别{{item.sex}}</li>
            <li>身份证号/护照号{{item.number}}</li>
            <li>手机号{{item.number}}</li>
            <li>现居住地{{item.address}}</li>
            <li>登记人{{item.jointType}}</li>
            
        </ul>
      </div>
      <div>
        <label for="">截止时间：</label><span>{{parseTime(item.endTime,'{y}-{m}-{d}')}}</span>
      </div>
      <div>
        <label for="">完成日期：</label><span>{{item.completeTime}}</span>
      </div>
      <div>
        <label for="">分配小组：</label><span>{{item.taskGroup}}</span>
      </div>
      <div>
        <label for="">负责人：</label><span>{{item.registrant}}</span>
      </div>
      <div>
        <label for="">任务描述：</label><span>{{item.taskDes}}</span>
      </div>
      <div class="img">
            
            <span class="text">{{item.taskStatus}}</span>
        </div>
    </div>
    <div class="right">
        <div class="container1-box">
        <div class="one">
            <div class="left">
                <span class="iconfont quan">&#xe566;</span>
                <span class="xian"></span>
            </div>
            <div class="right">
                <span>张海迪 更新了密接者 张晓雅的信息</span>
                <span>2020-10-10 15：00</span>
            </div>
        </div>
        <div class="one">
            <div class="left">
                <span class="iconfont quan">&#xe566;</span>
                <span class="xian"></span>
            </div>
            <div class="right">
                <span>张海迪 更新了密接者 张晓雅的信息</span>
                <span>2020-10-10 15：00</span>
            </div>
        </div>
        
    </div>
    </div>
  </div>
</template>

<script>
import {defineComponent, onMounted,reactive,toRefs} from 'vue'
import {useRouter} from 'vue-router'
import axios from '@/util/http'
import {parseTime} from '@/util/date'
export default defineComponent({
    name:'edieThis',
    setup(){
        const Msg = reactive({
            list:[]
        })
        const id =useRouter().currentRoute._value.query.id
        onMounted(()=>{
            axios({
            method:'get',
            url:'command/findTaskById',
            params:{
                taskId:id
            }
        }).then((res)=>{
            console.log(res)
            Msg.list = res.data.data
        })
        })
        return{
            ...toRefs(Msg),parseTime
        }
    }
})
</script>
<style scoped lang="less">
.container-box{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 50px 20px;
    background-color: white;
  }
  .left{
    float: left;
    width: 50%;
    font-size: 13px;
    color: #333;
    position: relative;
  }
  .right{
    float: left;
    width: 50%;
    font-size: 13px;
    color: #333;
  }
  label{
    box-sizing: border-box;
    height:45px;
    display:inline-block;
    padding: 15px 10px;
  }
  .left>div>label{
    font-weight: normal;
  }
  .right label{
    font-weight: 650;
  }
  ul li {
    list-style: none;
  }
  .container1-box {
    box-sizing: border-box;
    width: 100%;
    padding: 50px 20px;
    background-color: white;
    position: relative;

    .one {
        width: 100%;
        display: flex;

        .left {
            width: 10%;
            display: flex;
            flex-direction: column;
            align-items: center;

            // 图标
            .iconfont {
                font-size: 25px;
            }

            .quan {
                color: #939393;
                height: 25%;
            }

            .xian {
                border: 1px solid #e5e5e5;
                height: 75%;
            }
        }

        .right {
            width: 45%;
            height: 60px;
            margin-bottom: 40px;
            display: flex;
            flex-direction: column;

            span {
                margin-bottom: 10px;
            }
        }
    }
}

.img {
    border-width: 0px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 88px;
    height: 109px;
}

.text {
    color: white;
    position: absolute;
    top: 32px;
    right: -8px;
  
}

/* 返回按钮 */
.exit {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-button {
    width: 95px;
    height: 40px;
    font-size: 13px;
}
  </style>